import { defineComponent, ref } from 'vue';
import { Icon, Button, PullRefresh } from 'vant';
import Styles from './homeWork.module.scss';
import { router } from '../../router/index';
import { useHomeWorksStore } from '@/domain/correction/hooks/homeWork';
import { StdHomeWork } from '@/domain/correction/types/jobs';
import { useCurrectStdStore } from '@/domain/correction/hooks/currectStd';
export default defineComponent({
  name: 'HomeWork',
  setup() {
    const store = useHomeWorksStore();
    const currectstore = useCurrectStdStore();
    const loading = ref(false);
    const refreshList = async () => {
      loading.value = true;
      await store.init();
      loading.value = false;
    };
    refreshList();
    const toCorrectEditor = () => {
      if (store.state.nCList) {
        currectstore.selectStudent(store.state.nCList[0], store.state.homeWorkList?.homework!);
        router.push({ path: '/correctEditor', replace: false });
      }
    };
    // 置顶
    const toTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    };
    const statusHtml = (item: StdHomeWork) => {
      let obj = { bgColor: '', color: '', text: '' };
      if (item.rejected !== 0) {
        obj = { bgColor: '#49cc86', color: '#666', text: '已驳回' };
      } else if (item.timeout_status === 3) {
        obj = { bgColor: '#49cc86', color: '#666', text: '已批改' };
      } else if (item.timeout_status === 0) {
        obj = { bgColor: '#277dff', color: '', text: '待批改' };
      } else if (item.timeout_status === 1) {
        obj = { bgColor: '#277dff', color: '', text: '即将超时' };
      } else if (item.timeout_status === 2) {
        obj = { bgColor: '#277dff', color: '', text: '已超时' };
      }
      return (
        <span>
          <span class={Styles['dot']} style={'background-color:' + obj.bgColor} />
          <span class={Styles['status-text']} style={'color:' + obj.color}>
            {obj.text}
          </span>
        </span>
      );
    };
    return () => (
      <div class="bg-white w-screen h-screen">
        <div class={Styles['title-box']}>
          <span class={Styles['title']}>学员作业列表</span>
          <span onClick={refreshList} class={Styles['refresh']}>
            <span class={Styles['refresh-text']}>刷新</span>
            <Icon name="replay" />
          </span>
        </div>
        <PullRefresh v-model={loading.value} onRefresh={refreshList}>
          <div style="min-height: calc(100vh - 11.6rem)">
            {store.state.allList?.map((item, index) => {
              return (
                <div
                  class={Styles['stu-list']}
                  key={index}
                  onClick={() => {
                    if (item.rejected === 0 && item.timeout_status !== 3) {
                      currectstore.selectStudent(item, store.state.homeWorkList?.homework!);
                      router.push({ path: '/correctEditor', replace: false });
                    }
                  }}
                >
                  <span class={Styles['stu-name']}>{item.stu_name || '学生' + item.stu_id}</span>
                  <span class={Styles['stu-status']}>{statusHtml(item)}</span>
                </div>
              );
            })}
          </div>
        </PullRefresh>
        <div class={Styles['btn-box']}>
          <div class={Styles['home-btn']}>
            <Button
              type="primary"
              block
              class={Styles['btn']}
              disabled={store.state.nCList?.length === 0}
              onClick={() => {
                toCorrectEditor();
              }}
            >
              进入批改
            </Button>
          </div>
        </div>
      </div>
    );
  }
});
